<template>
  <div>
    <div style="display: flex">
      <a-input-search
          v-model="keyword"
          placeholder="请输入客户姓名"
          enter-button="搜索客户"
          style="width: 400px;margin-bottom: 10px"
          size="large"
          @search="onSearch"
      />
      <a-button style="margin-left: 10px" size="large" type="danger" @click="reset">
        重置
      </a-button>
    </div>
    <a-table :loading="loading" :columns="columns" :data-source="data" rowKey="id">
      <a slot="name" slot-scope="name, record" @click="detail(record.id)">{{ name }}</a>
      <span slot="customTitle"><a-icon type="smile-o"/> 客户姓名</span>
      <span slot="pay" slot-scope="pay">
        <a-tag :color="pay === 0 ? 'red' : 'green'">{{ pay === 0 ? '未支付' : '已支付' }}</a-tag>
      </span>
      <span slot="action" slot-scope="text, record">
        <a-popconfirm
          title="确定客户已经支付成功?"
          ok-text="确定"
          cancel-text="取消"
          @confirm="confirm(record)"
          :disabled="record.pay === 1"
        >
          <a-button type="primary" size="small" :disabled="record.pay === 1">支付</a-button>
        </a-popconfirm>
      </span>
    </a-table>

    <a-modal
        title="详情"
        :visible="visible"
        :footer="null"
        @cancel="visible = false; detailData = {}"
    >
      <a-form-model>
        <a-form-model-item label="客户姓名">
          <a-input v-model="detailData.name" readOnly />
        </a-form-model-item>
        <a-form-model-item label="客户电话">
          <a-input v-model="detailData.phone" readOnly />
        </a-form-model-item>
        <a-form-model-item label="客户地址">
          <a-input v-model="detailData.address" readOnly />
        </a-form-model-item>
        <a-form-model-item label="价钱">
          <a-input v-model="detailData.price" readOnly />
        </a-form-model-item>
        <a-form-model-item label="加急处理">
          <a-input :value="detailData.urgent === 0 ? '是': '否'" readOnly />
        </a-form-model-item>
        <a-form-model-item label="货物大小">
          <a-input v-if="detailData.size === 1" value="正常" readOnly />
          <a-input v-else :value="detailData.size === 2 ? '小件' : '大件'" readOnly />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
const columns = [
  {
    key: 'name',
    dataIndex: 'name',
    slots: {title: 'customTitle'},
    scopedSlots: {customRender: 'name'},
  },
  {
    title: '客户电话',
    key: 'phone',
    dataIndex: 'phone',
  },
  {
    title: '客户地址',
    key: 'address',
    dataIndex: 'address',
  },
  {
    title: '价钱',
    key: 'price',
    dataIndex: 'price',
  },
  {
    title: '是否支付',
    key: 'pay',
    dataIndex: 'pay',
    scopedSlots: {customRender: 'pay'},
  },
  {
    title: '创建时间',
    key: 'createTime',
    dataIndex: 'createTime',
  },
  {
    title: '支付时间',
    key: 'payTime',
    dataIndex: 'payTime',
  },
  {
    title: '更多操作',
    key: 'action',
    scopedSlots: {customRender: 'action'},
  },
];

export default {
  name: "TolList",
  data() {
    return {
      columns,
      loading: false,
      data: [],
      keyword: '',
      select: {},
      detailData: {},
      visible: false
    }
  },
  mounted() {
    this.loadTableData()
  },
  methods: {
    loadTableData() {
      this.loading = true
      this.getRequest('/api/toll/?name=' + this.keyword).then(resp => {
        if (resp) {
          if (this.keyword !== '' && resp.length === 0) this.$message.warning('未搜索到相关客户')
          this.data = resp
          this.loading = false
        }
      })
    },
    confirm(record) {
      this.select = record
      this.select.pay = 1
      this.putRequest('/api/toll/', this.select).then(resp => {
        if (resp) {
          this.loadTableData()
        } else {
          this.loadTableData()
        }
      })
    },
    detail(id) {
      this.getRequest('/api/toll/' + id).then(resp => {
        if (resp) {
          this.detailData = resp
          this.visible = true
        }
      })
    },
    onSearch() {
      if (this.keyword === '') {
        this.$message.warning('请输入搜索内容')
      } else {
        this.loadTableData()
      }
    },
    reset() {
      this.keyword = ''
      this.loadTableData()
    }
  }
}
</script>

<style scoped>

</style>